<style lang='scss' scoped>
.setusername {
    width: 100%;
    height: 99.9%;
    font-size: 0.8rem;
    background-color: #e8ecf4;
    .setusername_box {
        padding: 0.8rem;
        .from {
            margin-top: 1rem;
            background-color: #fff;
            padding: 0.8rem;
            border-radius: 0.5rem;
        }
        .P {
            margin-top: 0.8rem;
            color: #c2c2cc;
            font-size: 0.5rem;
        }
        .button {
            margin-top: 5rem;
            color: #fff;
            border-radius: 36px;
            background: linear-gradient(270deg, #fa7563 0%, #fa924d 100%);
            text-align: center;
            padding: 0.5rem 0;
        }
    }
}
</style>

<template>
    <view class='setusername'>
        <u-navbar title="修改昵称"> </u-navbar>
        <view class="setusername_box">
            <view class="from">
                <u-input v-model="state.value" type="text" height="10" maxlength="10" :clearable="true" :focus="true" :placeholder="state.userName" />
            </view>
            <view class="P">
                最多10个字符，好听的昵称可以让你的心情更美丽哟。
            </view>
            <view class="button" @click="ok">
                保存
            </view>
        </view>
    </view>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { setUserInfo, getUserInfo } from "@/api/user.ts";
import { set } from "lodash-es";
const state = reactive<{
    value: string;
    userName: string;
}>({
    value: "",
    userName: "",
});
onShow(() => {
    localData();
});
// 请求数据
const getData = async () => {};
// 本地数据
const localData = () => {
    const user_info = uni.getStorageSync("user_info");
    state.userName = user_info.userInfo.nickname || "";
};
const ok = async () => {
    const response = await setUserInfo({ nickname: state.value });
    if (response) {
        getUserInfo().then((user_info) => {
            state.user_info = user_info;
            uni.setStorageSync("user_info", user_info);
        });
        uni.$u.toast("修改成功");
        setTimeout(() => {
            uni.navigateBack();
        }, 1000);
    }
};
</script>